<template>
  <div class="deal">
    <div class="list">
      <div v-for="item in list" class="item">
        <div class="column">{{ item.column }}</div>
        <div class="wrap">
          <div class="left">
            <van-icon v-if="item.collect" name="star" color="#f7931a" size="24" @click="toggleCollect(item)" />
            <van-icon v-else name="star-o" color="#fff" size="24" @click="toggleCollect(item)" />
            <div>
              <div>
                <span>{{ item.currency1 }}</span>
                <span v-if="item.currency2" class="currency2">/{{ item.currency2 }}</span>
                <span v-if="item.lever" class="lever">{{ item.lever }}x</span>
              </div>
              <div v-if="item.basic" class="basic">
                <span>{{ item.basic }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="price">{{ item.price }}</div>
            <div class="profit" :style="{ color: item.profit > 0 ? '#ffb117' : '#CE5B7C' }">{{ item.profit }}%</div>
          </div>
        </div>
      </div>
    </div>

    <div class="share-option">
      <div class="title">期权</div>
      <div class="item">
        <div>
          <img src="../images/option1.png" alt="">
          <div>
            <span>ETHUSDT T型报价</span>
          </div>
        </div>
        <van-icon name="arrow" size="14" />
      </div>
      <div class="item">
        <div>
          <img src="../images/option2.png" alt="">
          <div>
            <span>ETH期权简选</span>
            <span class="price">市场价格$2,663.39</span>
          </div>
        </div>
        <van-icon name="arrow" size="14" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Deal',
  data() {
    return {
      list: [
        { column: "现货", collect: true, currency1: "ETH", currency2: "USDT", lever: 10, price: '63,476.2', profit: 13 },
        { column: "永续", collect: false, currency1: "ETHUSDT 永续", basic: "USDT", price: '63,476.2', profit: -0.13 },
        { column: "交割", collect: false, currency1: "ETHUSDT-250CT24", basic: "USDT", price: '63,476.2', profit: 0.01 },
      ]
    }
  },
  methods: {
    toggleCollect(item) {
      item.collect = !item.collect;
    }
  }
}
</script>

<style lang="scss" scoped>
.deal {
  height: 100%;

  .list {
    margin-top: 54px;

    .item {
      margin-bottom: 120px;

      .column {
        font-size: 40px;
        margin-bottom: 52px;
      }

      .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;
          gap: 26px;
          font-size: 32px;

          .currency2 {
            color: #929292;
          }

          .lever {
            font-size: 24px;
            color: #DCC16A;
            margin-left: 10px;
          }

          .basic {
            color: #929292;
          }
        }

        .right {
          text-align: right;

          .price {
            font-weight: 600;
            font-size: 36px;
          }

          .profit {
            font-size: 28px;
          }
        }
      }
    }
  }

  .share-option {
    .title {
      font-size: 40px;
      margin-bottom: 44px;
    }

    .item {
      border: 0.5px solid #2B2B2B;
      margin-bottom: 32px;
      padding: 30px 20px 30px 24px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &>div {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 28px;

        &>div {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .price {
            font-size: 22px;
            color: #929292;
          }
        }
      }
    }
  }
}
</style>